<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="应用启动" name="threshold_management_application">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
          <el-form-item label="应用名称" prop="hostEncoding">
            <el-select v-model="queryParams.hostEncoding" @change="handleEncoding" placeholder="请选择应用名称" clearable>
              <el-option
                v-for="dict in appNameList"
                :key="dict.id"
                :label="dict.hostEncoding"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="application-start">
          <div class="application">
            <label>应用启动耗时</label>
            <div class="app-box">
              <div class="application-box">
                <span>启动时间</span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.extend1}}</span>
                <el-input
                  v-model="params.extend1"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.timeConsuming6}}</span>
                <el-input
                  v-model="params.timeConsuming6"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ms 时为延时状态</span>
              </div>
              <div class="application-box">
                <span>启动时间</span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.timeConsuming5}}</span>
                <el-input
                  v-model="params.timeConsuming5"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.timeConsuming4}}</span>
                <el-input
                  v-model="params.timeConsuming4"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ms 时为告警状态</span>
              </div>
              <div class="application-box">
                <span>启动时间</span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.timeConsuming3}}</span>
                <el-input
                  v-model="params.timeConsuming3"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.timeConsuming2}}</span>
                <el-input
                  v-model="params.timeConsuming2"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ms 时为异常状态</span>
              </div>
              <div class="application-box">
                <span>启动时间 ≧ </span>
                <span class="app-text" v-if="inputDisabled">{{applicationList.timeConsuming1}}</span>
                <el-input
                  v-model="params.timeConsuming1"
                  placeholder=""
                  size="mini"
                  :disabled="inputDisabled"
                  v-if="!inputDisabled"
                />
                <span> ms 时为故障状态</span>
              </div>
            </div>
          </div>
          <div class="app-but">
            <el-button type="primary" size="mini" @click="submit('start')">{{inputDisabled?'编辑':'保存'}}</el-button>
          </div>
        </div>
        <div>
          <div class="application">
            <label>应用响应耗时</label>
            <div class="app-box">
              <div class="application-box">
                <span>响应时间</span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend8}}</span>
                <el-input
                  v-model="params.extend8"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend7}}</span>
                <el-input
                  v-model="params.extend7"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ms 时为延时状态</span>
              </div>
              <div class="application-box">
                <span>响应时间</span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend6}}</span>
                <el-input
                  v-model="params.extend6"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend5}}</span>
                <el-input
                  v-model="params.extend5"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ms 时为告警状态</span>
              </div>
              <div class="application-box">
                <span>响应时间</span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend4}}</span>
                <el-input
                  v-model="params.extend4"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend3}}</span>
                <el-input
                  v-model="params.extend3"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ms 时为异常状态</span>
              </div>
              <div class="application-box">
                <span>响应时间 ≧ </span>
                <span class="app-text" v-if="responseDisabled">{{applicationList.extend2}}</span>
                <el-input
                  v-model="params.extend2"
                  placeholder=""
                  size="mini"
                  :disabled="responseDisabled"
                  v-if="!responseDisabled"
                />
                <span> ms 时为故障状态</span>
              </div>
            </div>
          </div>
          <div class="app-but">
            <el-button type="primary" size="mini" @click="submit('response')">{{responseDisabled?'编辑':'保存'}}</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="硬件" name="threshold_management_hard_device">
        <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
          <el-form-item label="硬件名称" prop="hardDevName">
            <el-select v-model="queryParams.hardDevName" @change="handlehardDev" placeholder="请选择硬件" clearable>
              <el-option
                v-for="dict in hardDeviceList"
                :key="dict.id"
                :label="dict.taskName"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-form> -->
        <div class="application-start">
          <div class="application">
            <label>硬件耗时</label>
            <div class="app-box">
              <div class="application-box">
                <span>硬件耗时</span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.extend1}}</span>
                <el-input
                  v-model="hardDevparams.extend1"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.timeConsuming6}}</span>
                <el-input
                  v-model="hardDevparams.timeConsuming6"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ms 时为延时状态</span>
              </div>
              <div class="application-box">
                <span>硬件耗时 </span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.timeConsuming5}}</span>
                <el-input
                  v-model="hardDevparams.timeConsuming5"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.timeConsuming4}}</span>
                <el-input
                  v-model="hardDevparams.timeConsuming4"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ms 时为告警状态</span>
              </div>
              <div class="application-box">
                <span>硬件耗时 </span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.timeConsuming3}}</span>
                <el-input
                  v-model="hardDevparams.timeConsuming3"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.timeConsuming2}}</span>
                <el-input
                  v-model="hardDevparams.timeConsuming2"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ms 时为异常状态</span>
              </div>
              <div class="application-box">
                <span>硬件耗时 ≧ </span>
                <span class="app-text" v-if="ncDisabled">{{hardDeviceObj.timeConsuming1}}</span>
                <el-input
                  v-model="hardDevparams.timeConsuming1"
                  placeholder=""
                  size="mini"
                  :disabled="ncDisabled"
                  v-if="!ncDisabled"
                />
                <span> ms 时为故障状态</span>
              </div>
            </div>
          </div>
          <div class="app-but">
            <el-button type="primary" size="mini" @click="submit('内存')">{{ncDisabled?'编辑':'保存'}}</el-button>
          </div>
        </div>
        <div>
          <div class="application">
            <label>CPU耗时</label>
            <div class="app-box">
              <div class="application-box">
                <span>CPU耗时</span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend8}}</span>
                <el-input
                  v-model="hardDevparams.extend8"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend7}}</span>
                <el-input
                  v-model="hardDevparams.extend7"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ms 时为延时状态</span>
              </div>
              <div class="application-box">
                <span>CPU耗时 </span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend6}}</span>
                <el-input
                  v-model="hardDevparams.extend6"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend5}}</span>
                <el-input
                  v-model="hardDevparams.extend5"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ms 时为告警状态</span>
              </div>
              <div class="application-box">
                <span>CPU耗时 </span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend4}}</span>
                <el-input
                  v-model="hardDevparams.extend4"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ~ </span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend3}}</span>
                <el-input
                  v-model="hardDevparams.extend3"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ms 时为异常状态</span>
              </div>
              <div class="application-box">
                <span>CPU耗时 ≧ </span>
                <span class="app-text" v-if="cpuDisabled">{{hardDeviceObj.extend2}}</span>
                <el-input
                  v-model="hardDevparams.extend2"
                  placeholder=""
                  size="mini"
                  :disabled="cpuDisabled"
                  v-if="!cpuDisabled"
                />
                <span> ms 时为故障状态</span>
              </div>
            </div>
          </div>
          <div class="app-but">
            <el-button type="primary" size="mini" @click="submit('cpu')">{{cpuDisabled?'编辑':'保存'}}</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="网络" name="threshold_management_network">
        <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
          <el-form-item label="应用名称" prop="timeConsuming1">
            <el-input
              v-model="queryParams.timeConsuming1"
              placeholder="请输入应用名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form> -->
        <div class="application">
          <label>网络耗时</label>
          <div class="app-box">
            <div class="application-box">
              <span>网络耗时</span>
              <span class="app-text" v-if="networkDisabled">{{networkObj.extend10}}</span>
              <el-input
                v-model="networkparams.extend10"
                placeholder=""
                size="mini"
                :disabled="networkDisabled"
                v-if="!networkDisabled"
              />
              <span> ~ </span>
              <span class="app-text" v-if="networkDisabled">{{networkObj.extend11}}</span>
              <el-input
                v-model="networkparams.extend11"
                placeholder=""
                size="mini"
                :disabled="networkDisabled"
                v-if="!networkDisabled"
              />
              <span> ms 时为延时</span>
            </div>
            <div class="application-box">
              <span>网络耗时 ≧ </span>
              <span class="app-text" v-if="networkDisabled">{{networkObj.extend9}}</span>
              <el-input
                v-model="networkparams.extend9"
                placeholder=""
                size="mini"
                :disabled="networkDisabled"
                v-if="!networkDisabled"
              />
              <span> ms 时为离线状态</span>
            </div>
            <!-- <div class="application-box">
              <span>FCP耗时 ≧ </span>
              <span class="app-text" v-if="networkDisabled">500</span>
              <el-input
                v-model="params.num1"
                placeholder=""
                size="mini"
                :disabled="networkDisabled"
                v-if="!networkDisabled"
              />
              <span> ms 时为异常状态</span>
            </div>
            <div class="application-box">
              <span>Time to interactive耗时 ≧ </span>
              <span class="app-text" v-if="networkDisabled">500</span>
              <el-input
                v-model="params.num1"
                placeholder=""
                size="mini"
                :disabled="networkDisabled"
                v-if="!networkDisabled"
              />
              <span> ms 时为故障状态</span>
            </div> -->
          </div>
        </div>
        <div class="app-but">
          <el-button type="primary" size="mini" @click="submit('network')">{{networkDisabled?'编辑':'保存'}}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import {
  allListThresholdManagement,
  allListDetectionManagement,
  listDetectionManagement,
  listThresholdManagement,
  getThresholdManagement,
  delThresholdManagement,
  addThresholdManagement,
  updateThresholdManagement
} from "@/api/system/thresholdManagement";

export default {
  name: "ThresholdManagement",
  dicts: ['status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 阈值管理表格数据
      applicationList: {},
      hardDeviceObj: {},
      networkObj: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openDetail: false,
      inputDisabled: true,
      responseDisabled: true,
      ncDisabled: true,
      cpuDisabled: true,
      networkDisabled: true,
      activeName: 'threshold_management_application',
      appNameList: [],
      hardDeviceList: [],
      params: {
        extend1: '',
        timeConsuming6: '',
        timeConsuming5: '',
        timeConsuming4: '',
        timeConsuming3: '',
        timeConsuming2: '',
        timeConsuming1: '',
        extend8: '',
        extend7: '',
        extend6: '',
        extend5: '',
        extend4: '',
        extend3: '',
        extend2: '',
        id: null,
      },
      hardDevparams: {
        extend1: '',
        timeConsuming6: '',
        timeConsuming5: '',
        timeConsuming4: '',
        timeConsuming3: '',
        timeConsuming2: '',
        timeConsuming1: '',
        extend8: '',
        extend7: '',
        extend6: '',
        extend5: '',
        extend4: '',
        extend3: '',
        extend2: '',
        id: null,
      },
      networkparams: {
        extend9: '',
        extend10: '',
        extend11: '',
        id: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        host: null,
        type: null,
        hostEncoding: 1,
        hardDevName: null,
        timeConsuming2: null,
        timeConsuming3: null,
        timeConsuming4: null,
        timeConsuming5: null,
        timeConsuming6: null,
      },
      
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getAllList()
    this.getList();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name, event,'1111');
      if(tab != 'threshold_management_application') {
        this.queryParams.hostEncoding = 1
      }
      this.getList()
    },
    handleEncoding() {
      this.getList()
    },
    handlehardDev() {
      this.getListDetection()
    },
    handleEdit() {},
    // 查下拉框
    getAllList() {
      allListThresholdManagement().then((res) => {
        this.appNameList = res.rows
      })
      // allListDetectionManagement().then((res) => {
      //   console.log(res.rows, '----=');
      //   this.hardDeviceList = res.rows
      // })
      
    },
    // 硬件
    getListDetection() {
      // let para = {
      //   pageNum: 1,
      //   pageSize: 100,
      //   host: this.queryParams.hardDevName,
      //   type: this.activeName,
      // }
      // console.log(para,'para');
      // listDetectionManagement(para).then((res) => {
      //   console.log(res.rows,'硬件');
      //   this.hardDeviceObj = res.rows;
      // })
    },
    /** 查询应用启动 */
    getList() {
      this.loading = true;
      let para = {
        pageNum: 1,
        pageSize: 100,
        host: this.queryParams.hostEncoding,
        type: this.activeName == 'threshold_management_application'? this.activeName : 'threshold_management_hard_device',
      }
      listThresholdManagement(para).then(response => {
        if(response.rows.length > 0) {
          if(this.activeName == 'threshold_management_application') {
            this.applicationList = response.rows[0];
            for(let key in this.params) {
              this.params[key] = response.rows[0][key];
            }
            this.total = response.total;
            this.loading = false;
          }
          if(this.activeName == 'threshold_management_hard_device') {
            console.log(response.rows[0],'硬件');
            this.hardDeviceObj = response.rows[0];
            for(let key in this.hardDevparams) {
              this.hardDevparams[key] = response.rows[0][key];
            }
          }
          if(this.activeName == 'threshold_management_network') {
            console.log(response.rows[0],'网络');
            this.networkObj = response.rows[0];
            for(let key in this.networkparams) {
              this.networkparams[key] = response.rows[0][key];
            }
          }
        }else {
          this.applicationList = {}
          this.params = {
            extend1: '',
            timeConsuming6: '',
            timeConsuming5: '',
            timeConsuming4: '',
            timeConsuming3: '',
            timeConsuming2: '',
            timeConsuming1: '',
            extend8: '',
            extend7: '',
            extend6: '',
            extend5: '',
            extend4: '',
            extend3: '',
            extend2: '',
            id: null,
          }
        }
      });

      
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        host: null,
        type: null,
        timeConsuming1: null,
        timeConsuming2: null,
        timeConsuming3: null,
        timeConsuming4: null,
        timeConsuming5: null,
        timeConsuming6: null,
        delFlag: null,
        createTime: null,
        createBy: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        extend1: null,
        extend2: null,
        extend3: null,
        extend4: null,
        extend5: null,
        extend6: null,
        extend7: null,
        extend8: null,
        extend9: null,
        extend10: null
      };
      this.resetForm("form");
    },

    submit(val) {
      console.log(val, this.activeName, 'activeName');
      let param = {
        // tabs类型，应用名称id,应用启动时间字段
        type: this.activeName == 'threshold_management_application'? this.activeName : 'threshold_management_hard_device',
        host: this.queryParams.hostEncoding,
      }
      // 应用启动
      if(this.activeName == 'threshold_management_application') {
        if(val == 'start') {
          this.inputDisabled = !this.inputDisabled
          if(this.inputDisabled) {
            param = Object.assign(param,this.params)
            updateThresholdManagement(param).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }
        }else if(val == 'response') {
          this.responseDisabled = !this.responseDisabled
          if(this.responseDisabled) {
            param = Object.assign(param,this.params)
            updateThresholdManagement(param).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }
  
        }
      }else 
      if(this.activeName == 'threshold_management_hard_device') {//硬件
        if(val == '内存') {
          this.ncDisabled = !this.ncDisabled
          if(this.ncDisabled) {
            console.log('--ncDisabled----');
            param = Object.assign(param,this.hardDevparams)
            updateThresholdManagement(param).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }
  
        }else if(val == 'cpu') {
          this.cpuDisabled = !this.cpuDisabled
          if(this.cpuDisabled) {
            console.log('---cpuDisabled---');
            param = Object.assign(param,this.hardDevparams)
            updateThresholdManagement(param).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }
        }
        
      }
      if(this.activeName == 'threshold_management_network') {//网络
        if(val == 'network') {
          this.networkDisabled = !this.networkDisabled
          if(this.networkDisabled) {
            console.log('--networkDisabled----');
            param = Object.assign(param,this.networkparams)
            updateThresholdManagement(param).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }
        }
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加阈值管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getThresholdManagement(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改阈值管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateThresholdManagement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addThresholdManagement(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 修改按钮操作 */
    handleDetails(row) {
        // this.reset();
        const id = row.id || this.ids
        getThresholdManagement(id).then(response => {
            this.form = response.data;
            this.openDetail = true;
            this.title = "阈值管理详情";
        });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除阈值管理编号为"' + ids + '"的数据项？').then(function() {
        return delThresholdManagement(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/thresholdManagement/export', {
        ...this.queryParams
      }, `thresholdManagement_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.application-start {
  padding-bottom: 30px;
}
.application {
  padding-bottom: 20px;
}
.app-box {
  padding-top: 20px;
}
.app-but {
  padding-top: 10px;
}
.application-box {
  display: flex;
  padding-top: 10px;
  .app-text {
    width: 45px;
    text-align: center;
    line-height: 25px;
  }
  .el-input {
    width: 60px;
    margin: 0 10px;
    ::v-deep .el-input__inner {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }
}
</style>